<template>
  <div class="box">
    <div class="navBar_box">
      <div class="navBar" v-if="userRole === '2'">
        <router-link to="aboutPc">
          <div><span>首页</span></div>
        </router-link>
        <router-link to="home">
          <div><span>艺人搜索</span></div>
        </router-link>
        <router-link to="projectList">
          <div><span>所有项目</span></div>
        </router-link>
        <router-link to="myProject">
          <div><span>我的项目</span></div>
        </router-link>
        <router-link to="myJoinProject">
          <div><span>我参加的项目</span></div>
        </router-link>
        <router-link to="artistManagement">
          <div><span>艺人管理</span></div>
        </router-link>
        <router-link to="myCollection">
          <div><span>我的收藏</span></div>
        </router-link>
      </div>
      <div class="navBar" v-if="userRole === '1'">
        <router-link to="actorAboutPc">
          <div><span>首页</span></div>
        </router-link>
        <router-link to="newArtistDetail1">
          <div><span>艺人信息</span></div>
        </router-link>
      </div>
      <!--<div class="routing">-->
      <!--<span class="routing_home">首页</span> / <span>xxxxx</span>-->
      <!--</div>-->
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userRole: ''
      }
    },
    mounted() {
      var userRole = sessionStorage.getItem("userrole");
      this.userRole = userRole;
    }
  };
</script>

<style scoped lang="less">
  .box {
    height: 78px;
  }

  .navBar_box {
    width: 100%;
    height: 50px;
    background-color: rgb(50, 50, 50);
    .navBar {
      width: 80%;
      height: 100%;
      margin: auto;
      display: flex;
      flex-direction: row;
      div {
        width: 120px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        letter-spacing: 0.4px;
      }
      div:hover {
        background-color: black;
      }
      text-decoration: none;
      outline: none;

      .router-link-active {
        background-color: black;
      }
    }
    .routing {
      width: 80%;
      margin: auto;
      color: #f5f5f5;
      padding: 4px 0px 4px 0px;
      font-size: 14px;
      .routing_home {
        color: #b3302e;
      }
    }
  }
</style>
